<template>
   <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div class="structure_cent_b">
          <div class="structure_cent_b_left">
            <a-tree
              :tree-data="mukuaiTree"
              :replaceFields='replaceFields'
              @select='clicktree'
              :default-selected-keys="defaultselected"
            ></a-tree>
          </div>
          <div class="structure_cent_b_right">
            <div class="structure_cent_b_title">
              <a-button
                v-action:add
                icon="plus"
                type='primary'
                @click="$refs.menumentModule.open('add')"
              >新增</a-button>
            </div>
            <a-table
              :columns="columns"
              :data-source="datalist"
              bordered
              :rowKey='record=>record.id'
              :pagination="false"
              :childrenColumnName="'childList'"
              :scroll="{ x: true }"
            >
              <template
                slot="type"
                slot-scope="text"
              >
                {{typearr[text].name}}
              </template>
              <template
                slot="action"
                slot-scope="text, record"
              >
                <a
                  v-action:edit
                  href="javascript:;"
                  @click="$refs.menumentModule.open('edit',record)"
                >编辑</a>
                <a-popconfirm
                  style="margin-left:20px"
                  cancelText='取消'
                  okText="确认"
                  title="您确定要删除吗?"
                  @confirm="onDelete(record)"
                >
                  <a
                    v-action:del
                    href="javascript:;"
                  >删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    <menumentModule
      ref="menumentModule"
      @onSave="into"
    />
    </a-card>

   </page-header-wrapper>
</template>

<script>
import {
  caidanTree,
  mokuaiTree,
  sava,
  deletecaidan,
  getid,
} from "@/api/menument";

import { getTreeData, getchild, urls } from "@/utils/util";
// import UploadImg from "@/views/component/uploadimg";
import { TreeSelect } from "ant-design-vue";
//编辑菜单
import menumentModule from "../modules/menumentModule";
const columns = [
  {
    title: "排序",
    dataIndex: "orderNum",
    align: "center",
  },
  {
    title: "菜单名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "组件标识",
    dataIndex: "component",
    align: "center",
  },
  {
    title: "模块名称",
    dataIndex: "moduleName",
    align: "center",
  },
  {
    title: "菜单类型",
    dataIndex: "type",
    align: "center",
    scopedSlots: { customRender: "type" },
  },

  {
    title: "权限",
    dataIndex: "authority",
    ellipsis:true,
    width:300,
    align: "center",
    scopedSlots: { customRender: "authority" },
  },
  {
    title: "跳转地址",
    dataIndex: "webUrl",
    align: "center",
  },
  {
    title: "操作",
    fixed: "right",
    dataIndex: "operation",
    scopedSlots: { customRender: "action" },
    align: "center",
  },
];

export default {
  components: {
    //   UploadImg,
    menumentModule,
  },
  data() {
    return {
      // fileList: [],
      SHOW_PARENT: TreeSelect.SHOW_PARENT,
      // confirmLoading1: false,
      // visible1: false,
      replaceFields: {
        children: "childList",
        title: "name",
        key: "id",
        value: "id",
      },
      xuanzhongarr: [],
      usertitle: "",
      datalist: [],
      treeData: [],
      bumentreeData: [],
      mukuaiTree: [],
      bianjitype: 0,
      columns,
      bianjiId: "",
      defaultselected: [],
      bumenform: this.$form.createForm(this, { name: "coordinated1" }),
      userarr: [],
      typeId: 0,
      bumenarr: "",

      typearr: [
        { id: 0, name: "目录" },
        { id: 1, name: "菜单" },
        { id: 2, name: "权限" },
      ],
      // 权限
      // options: [
      //   { label: "添加", value: "add" },
      //   { label: "编辑", value: "edit" },
      //   { label: "删除", value: "del" },
      //   { label: "批量删除", value: "delete_batch" },
      // ],
      value: [],
    };
  },
  mounted() {
    this.getbumenTree();
    this.getmokuai();
  },

  methods: {
    // 初始化
    into() {
      this.getbumenTree();
      this.getmokuai();
    },
    //获取模块
    getmokuai() {
      new Promise((resolve, reject) => {
        mokuaiTree()
          .then((response) => {
            console.log(response);
            if (response.code == 0) {
              this.mukuaiTree = response.data.records;
              this.clicktree([]);
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg,
              });
            }
            resolve();
          })
          .catch((error) => {
            // this.$notification.error({
            //   message: "失败",
            //   description: `获取失败`,
            // });
            reject(error);
          });
      });
    },
    //获取公司部门树
    getbumenTree(val) {
      new Promise((resolve, reject) => {
        caidanTree({
          types: "0,1",
          ...val,
        })
          .then((response) => {
            console.log("获取公司部门树---", response.data);
            if (response.code == 0) {
              this.bumentreeData = response.data;
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg,
              });
            }
            resolve();
          })
          .catch((error) => {
            // this.$notification.error({
            //   message: "失败",
            //   description: `获取失败`,
            // });
            reject(error);
          });
      });
    },
    delChildren(arr) {
      if (arr.length) {
        for (let i in arr) {
          if (arr[i].childList.length) {
            this.delChildren(arr[i].childList);
          } else {
            delete arr[i].childList;
          }
        }
      }
      return arr;
    },

    //点击人组织架构树
    async clicktree(val, e) {
      let data = {};
      if (val.length) {
        data.moduleId = val[0];
      } else {
        console.log(val);
      }
      let response = await caidanTree({
        types: "0,1",
        ...data,
      });
      if (response.code == 0) {
        let arr = response.data;
        this.datalist = this.delChildren(arr);
        // console.log("------- this.datalist----,", this.datalist);
      }

      if (val.length) {
        this.defaultselected = [];
        this.defaultselected.push(val[0]);
        this.xuanzhongarr = getTreeData(this.defaultselected, this.mukuaiTree);
        // console.log(this.xuanzhongarr);
        // console.log(this.defaultselected);
      } else {
        this.xuanzhongarr = [];
      }
    },
    //删除
    onDelete(val) {
      console.log(val);
      new Promise((resolve, reject) => {
        deletecaidan({ id: val.id })
          .then((response) => {
            console.log(response);
            if (response.code == 0) {
              this.getmokuai();
              this.$notification.success({
                message: "成功",
                description: "删除成功",
              });
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg,
              });
            }
            resolve();
          })
          .catch((error) => {
            // this.$notification.error({
            //   message: "失败",
            //   description: `获取失败`,
            // });
            reject(error);
          });
      });
    },

    //删除
    // shanchu(){
    //   console.log(this.xuanzhongarr);
    //   if(this.xuanzhongarr.length){
    //     this.bianjiId=this.xuanzhongarr[0].id
    //     console.log( this.bianjiId);
    //       new Promise((resolve, reject) => {
    //         deletecaidan({id:this.bianjiId}).then(response => {
    //             console.log(response);
    //             if(response.code==0){
    //               this.getmokuai()
    //                 this.$notification.success({
    //                 message: '成功',
    //                 description: '删除成功'
    //                 })
    //             }else{
    //                 this.$notification.error({
    //                 message: '失败',
    //                 description: response.msg
    //                 })
    //             }
    //             resolve()
    //         }).catch(error => {
    //             this.$notification.error({
    //             message: '失败',
    //             description: `获取失败`
    //             })
    //             reject(error)
    //         })
    //       })
    //   }else{
    //             this.$notification.error({
    //             message: '失败',
    //             description: `请选择数据`
    //             })
    //   }

    // },
    //选择人员树
    selectusertree(value, label, extra) {
      console.log("人员", value, label, extra);
      this.userarr = [];
      let userid = [];
      if (value.length != 0) {
        value.forEach((item) => {
          userid.push(item.value);
        });
        this.userarr = getTreeData(userid, this.treeData);
      }
      console.log(this.userarr);
    },

    //新增
    adddepartment1() {
      // this.bianjitype = 0;
      // this.usertitle = "新增";
      // this.getmokuai();
      // this.visible1 = true;
    },
    //选择部门树
    selecttree(value, label, extra) {
      this.bumenarr = "";
      let arr = [];
      arr.push(value);
      console.log("部门", value);
      console.log("部门", arr);
      this.bumenarr = getTreeData(arr, this.bumentreeData);
      console.log(this.bumenarr);
    },
    //选择公司树
    selectgongsitree(value, label, extra) {
      this.bumenarr = "";
      let arr = [];
      arr.push(value);
      console.log("公司", value);
      console.log("公司", arr);
      this.bumenarr = getTreeData(arr, this.treeData);
      console.log(this.bumenarr);
    },
    // //提交新增
    // tijiaobumen(e) {
    //   e.preventDefault();
    //   this.bumenform.validateFields((err, values) => {
    //     // console.log("err", !err);
    //     // console.log("values", values);
    //     if (!err) {
    //       this.confirmLoading1 = true;
    //       let icon;
    //       let authority;   //权限
    //       console.log("his.bianjitype ----", this.bianjitype); //1 修改 0新建

    //       if (this.value.length > 0) {
    //         authority = this.value.join(",");
    //       }
    //       // if (this.fileList.length) {
    //       if (this.bianjitype == 0) {
    //         if (this.fileList.length) {
    //           icon = this.fileList[0].response.data.url;
    //         }
    //         new Promise((resolve, reject) => {
    //           sava({ ...values, logoUrl: icon, authority })
    //             .then((response) => {
    //               console.log("response", response);
    //               if (response.code == 0) {
    //                 this.getmokuai();
    //                 this.$notification.success({
    //                   message: "成功",
    //                   description: "新增成功",
    //                 });
    //                 this.visible1 = false;
    //                 this.confirmLoading1 = false;
    //               } else {
    //                 this.confirmLoading1 = false;
    //                 this.$notification.error({
    //                   message: "失败",
    //                   description: response.msg,
    //                 });
    //               }
    //               resolve();
    //             })
    //             .catch((error) => {
    //               this.confirmLoading1 = false;
    //               this.$notification.error({
    //                 message: "失败",
    //                 description: `查询失败`,
    //               });
    //               reject(error);
    //             });
    //         });
    //       } else {
    //         //判断 回掉数据是否包含 url
    //         if (this.fileList.length != 0) {
    //           if (this.fileList[0].response) {
    //             icon = this.fileList[0].response.data.url;
    //           } else {
    //             icon = this.fileList[0].urlimg;
    //           }
    //         }

    //         // console.log("icon--赋值--", icon);
    //         new Promise((resolve, reject) => {
    //           sava({ ...values, id: this.bianjiId, logoUrl: icon, authority })
    //             .then((response) => {
    //               if (response.code == 0) {
    //                 this.getmokuai();
    //                 this.$notification.success({
    //                   message: "成功",
    //                   description: "编辑成功",
    //                 });

    //                 this.visible1 = false;
    //                 this.confirmLoading1 = false;
    //               } else {
    //                 this.confirmLoading1 = false;
    //                 this.$notification.error({
    //                   message: "失败",
    //                   description: response.msg,
    //                 });
    //               }
    //               resolve();
    //             })
    //             .catch((error) => {
    //               this.confirmLoading1 = false;
    //               this.$notification.error({
    //                 message: "失败",
    //                 description: `失败`,
    //               });
    //               reject(error);
    //             });
    //         });
    //       }
    //       // } else {
    //       //   this.confirmLoading1 = false;
    //       //   this.$notification.error({
    //       //     message: "失败",
    //       //     description: "请上传图片",
    //       //   });
    //       // }
    //     }
    //   });
    // },
    //回调
    huidiao(v) {
      console.log("v----", v);
      this.fileList = v;
      console.log(this.fileList);
    },
    // 权限多选
    onChange(checkedValues) {
      console.log("checked = ", checkedValues);
      // let checkedValuesStr = checkedValues.join(",");
      this.value = checkedValues;
      console.log("value = ", this.value);
    },
  },
};
</script>

<style scoped>
.structure_cent {
  background: #fff;
  border: 1px solid #ccc;
}
.structure_cent_title {
  width: 100%;
  font-size: 16px;
  color: #333;
  background: #f6f6f6;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  border-bottom: 1px solid #ccc;
}
.structure_cent_title span {
  border-left: 4px solid #0086ff;
  padding-left: 15px;
}
.structure_cent_b {
  max-width: 1200px;
  margin: auto;
  /* padding-top: 60px;
  padding-bottom: 60px; */
  display: flex;
  justify-content: space-between;
}
.structure_cent_b_left {
  width: 250px;
  border: 1px solid #ccc;
}
.structure_cent_b_right {
  width: 900px;
  margin-left: 20px;
}
.structure_cent_b_title {
  margin-bottom: 30px;
}
.addbtn_f {
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.addbtn_f div {
  width: 100px;
  height: 35px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 35px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  background: #f2f2f2;
}

.addbtn_f div:hover {
  background: #0086ff;
  color: #fff;
}
</style>